<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	import {
		parseTime
	} from '@/utils/ruoyi'
	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			showtype: {
				type: String,
				default: '电压'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				timer: null,
				x: [],
				a: [],
				colorList: ['#00aaff', '#9E87FF']
			}
		},
		mounted() {
			let that = this;
			//that.getPowerRecord();
			// that.timer = setInterval(function() {
			// 	that.getPowerRecord();
			// }, 10000);
		},
		beforeDestroy() {
			let that = this;
			that.a = [];
			that.v = [];
			that.c = [];
			that.d = [];
			that.x = [];
			if (!this.chart) {
				return
			}
			that.chart.dispose()
			that.chart = null
		},
		methods: {
			// setnums(a,falg) {
			// 	let that = this;
			// 	if(falg){
			// 		that.a = [];
			// 		that.x = [];
			// 	}
			// 	if(that.a.length>=50){
			// 		that.a.splice(0,1);
			// 		that.x.splice(0,1);
			// 	}

			// 	that.a.push(a);

			// 	that.x.push(parseTime(new Date(), '{h}:{i}:{s}'));
			// 	that.$nextTick(() => {
			// 		that.initChart();
			// 	})
			// },
			async getPowerRecord() {
				let that = this;
				let parm = {
					"beginTime": "2022-3-1",
					"endTime": "2022-3-20"
				};
				let rulst = await getPowerRecord(parm);
				if (rulst.code == 1) {
					if (rulst.obj) {
						rulst.obj.forEach(item => {
							let pdd = (item.kwh * 0.785).toFixed(2);
							that.a.push(pdd);
							that.x.push(item.daytime);
						})
						that.$nextTick(() => {
							that.initChart();
						})
					}
					// let sumd = (rulst.obj.totalElecEnergy*0.78).toFixed(2);
					// this.setnums(sumd,false)
				}
			},
			close() {
				this.a = [];
				this.v = [];
				this.x = [];
				clearInterval(this.timer);
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
					// backgroundColor: '#fff',
					title: {
						text: '',
						textStyle: {
							fontSize: 12,
							fontWeight: 400
						},
						left: 'center',
						top: '2%'
					},
					legend: {
						icon: 'circle',
						top: '1%',
						right: '5%',
						itemWidth: 6,
						itemGap: 20,
						textStyle: {
							color: '#556677'
						}
					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							label: {
								show: true,
								backgroundColor: '#fff',
								color: '#556677',
								borderColor: 'rgba(0,0,0,0)',
								shadowColor: 'rgba(0,0,0,0)',
								shadowOffsetY: 0
							},
							lineStyle: {
								width: 0
							}
						},
						backgroundColor: '#fff',
						textStyle: {
							color: '#5c6c7c'
						},
						padding: [10, 10],
						extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
					},
					grid: {
						top: '10%',
						left: '6%',
						right: '3%',
						bottom: '10%',
					},
					xAxis: [{
						type: 'category',
						data: that.x,
						axisLine: {
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							interval: 1,
							textStyle: {
								color: '#556677'
							},
							// 默认x轴字体大小
							fontSize: 12,
							// margin:文字到x轴的距离
							margin: 15
						},
						axisPointer: {
							label: {
								// padding: [11, 5, 7],
								padding: [0, 0, 10, 0],
								/*
					    除了padding[0]建议必须是0之外，其他三项可随意设置
					    
					    和CSSpadding相同，[上，右，下，左]
					    
					    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
					    
					    padding[2]的10:
					    
					    10 = 文字距下边线的距离 + 下边线的宽度
					                
					    如：UI图中文字距下边线距离为7 下边线宽度为2
					    
					    则padding: [0, 0, 9, 0]
					                
					                */
								// 这里的margin和axisLabel的margin要一致!
								margin: 15,
								// 移入时的字体大小
								fontSize: 12,
								backgroundColor: {
									type: 'linear',
									x: 0,
									y: 0,
					  		x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#fff' // 0% 处的颜色
									}, {
										// offset: 0.9,
										offset: 0.86,
										/*
					0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
					                        
					                        */
										color: '#fff' // 0% 处的颜色
									}, {
										offset: 0.86,
										color: '#33c0cd' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#33c0cd' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						boundaryGap: true
					}],
					yAxis: [{
						type: 'value',
						name: '排放量(kg)',
						// min: -20,
						// max: 20,
						interval: 5,
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [{
						name: '减少碳排放量',
						type: 'bar',
						data: that.a,
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 5,
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#00aaff'
								},
								{
									offset: 1,
									color: '#00aaff'
								}
					  ]),
					 	shadowColor: 'rgba(158,135,255, 0.3)',
							shadowBlur: 10,
							shadowOffsetY: 20
						},
						itemStyle: {
							normal: {
								color: that.colorList[0],
								borderColor: that.colorList[0]
							}
						}
					}]
				})
			}
		}
	}
</script>
